<template>
  <div class="qrform">
    <el-form ref="form" :model="form" label-width="80px" label-position="left" :rules="rules">
      <el-form-item label="科目" prop="choose">
        <el-radio v-for="s in $store.state.subjects"
                  :key="s.id"
                  :label="s.km"
                  v-model="form.choose"
        >{{ s.km }}
        </el-radio>
      </el-form-item>
      <el-form-item label="详细信息" prop="bz">
        <el-input
          type="textarea"
          placeholder="请输入内容"
          v-model="form.bz">
        </el-input>
      </el-form-item>
    </el-form>
    <el-button
      type="primary" plain
      class="search"
      @click="start"
    >创建
    </el-button>
  </div>
</template>

<script>

import {recordInsert} from "../util/request/record";
import {message} from "../util/message";
import {is_empty} from "../util/funcutils";

export default {
  name: "record",
  data() {
    return {
      form: {
        choose: '',
        bz: ''
      },
      rules: {
        choose: [{required: true, message: '请选择科目', trigger: 'blur'}],
        bz: [{required: true, message: '请输入详细信息', trigger: 'blur'},]
      }
    }
  },
  mounted() {
    this.$store.dispatch('initSubjects')
  },
  methods: {
    start() {
      if (is_empty(this.form.bz) || is_empty(this.form.choose)) {
        this.$message(message(false, '请输入有效信息'))
      } else {
        recordInsert({
          bz: this.form.bz,
          km: this.form.choose
        }).then(res => {
          this.$message(message(res.data.success, res.data.msg))
          this.form.bz = ''
        })
      }
    }
  }
}
</script>

<style scoped>
.el-form{
  width: 40%;
  margin: 0 auto;
}
</style>
